import React, { useState } from 'react'
import Filter from './Filter'
import { Table, message, Image } from 'antd'
import Container from '@/appComponents/Container'
import { useTableData } from '&/hooks'
import downloadExcelImg from '&/commonjs/downloadExcelImg'
import { getElecEquipmentScheduling } from '&/api/electricity'
import dayjs from 'dayjs'
import './index.scss'
const Operation = () => {
  const [paramsData, setParamsData] = useState({
    start_time: dayjs().add(-1,'d').format('YYYY-MM-DD 00:00:00'),
    end_time: dayjs().format('YYYY-MM-DD 23:59:59'),
    page: 1,
    page_size: 10,
    feedback_state: -1
  })
  const columns = [
    {
      width: 150,
      title: '报警编号',
      dataIndex: 'code',
      key: 'code',
      align: 'center'
    },
    {
      width: 150,
      title: '运维类型',
      dataIndex: 'operation_type',
      key: 'operation_type',
      align: 'center'
    },
    {
      width: 150,
      title: '设施编码',
      dataIndex: 'facility_coding',
      key: 'facility_coding',
      align: 'center'
    },
    {
      width: 150,
      title: '区县',
      dataIndex: 'county_name',
      key: 'county_name',
      align: 'center'
    },
    {
      width: 150,
      title: '乡镇/街道',
      dataIndex: 'town_name',
      key: 'town_name',
      align: 'center'
    },
    {
      width: 150,
      title: '企业名称',
      dataIndex: 'ent_name',
      key: 'ent_name',
      align: 'center'
    },
    {
      width: 150,
      title: '企业地址',
      dataIndex: 'dev_address',
      key: 'dev_address',
      align: 'center'
    },
    {
      width: 150,
      title: '检测对象',
      dataIndex: 'dev_name',
      key: 'dev_name',
      align: 'center'
    },
    {
      width: 150,
      title: '监测点类型',
      dataIndex: 'dev_type_name',
      key: 'dev_type_name',
      align: 'center'
    },
    {
      width: 150,
      title: '设备SN',
      dataIndex: 'dev_id',
      key: 'dev_id',
      align: 'center'
    },
    {
      width: 150,
      title: '设备报警时间',
      dataIndex: 'created_at',
      key: 'created_at',
      align: 'center'
    },
    {
      width: 200,
      title: () => {
        return handlerText('反馈状态', '(未反馈/已电话反馈/已现场反馈)')
      },
      dataIndex: 'feedback_state',
      key: 'feedback_state',
      align: 'center'
    },
    {
      width: 200,
      title: () => {
        return handlerText('电话反馈时间', '(格式 2023-01-01 00:00:00)')
      },
      dataIndex: 'feedback_phone_time',
      key: 'feedback_phone_time',
      align: 'center'
    },
    {
      width: 150,
      title: () => {
        return handlerText('电话反馈内容')
      },
      dataIndex: 'feedback_phone_content',
      key: 'feedback_phone_content',
      align: 'center'
    },
    {
      width: 200,
      title: () => {
        return handlerText('现场反馈时间', '(格式 2023-01-01 00:00:00)')
      },
      dataIndex: 'feedback_scene_time',
      key: 'feedback_scene_time',
      align: 'center'
    },
    {
      width: 150,
      title: () => {
        return handlerText('现场反馈内容')
      },
      dataIndex: 'feedback_scene_content',
      key: 'feedback_scene_content',
      align: 'center'
    },
    {
      width: 200,
      title: () => {
        return handlerText('操作', '(关闭报警/持续报警)')
      },
      dataIndex: 'operation',
      key: 'operation',
      align: 'center'
    },
    {
      width: 150,
      title: () => {
        return handlerText('操作照片')
      },
      dataIndex: 'operation_picture',
      key: 'operation_picture',
      align: 'center',
      render: (e) => {
        if (e) {
          return <Image style={{ width: 100, height: 100 }} src={e} />
        }
      }
    },
    {
      width: 150,
      title: () => {
        return handlerText('操作备注')
      },
      dataIndex: 'operation_remark',
      key: 'operation_remark',
      align: 'center'
    },
    {
      width: 150,
      title: () => {
        return handlerText('操作人名称')
      },
      dataIndex: 'operation_personnel',
      key: 'operation_personnel',
      align: 'center'
    }
  ]
  const getParams = () => {
    let newParamsData = {}
    for (let key in paramsData) {
      if (paramsData[key] != (-1 || '-1')) {
        newParamsData[key] = paramsData[key]
      }
    }
    return newParamsData
  }
  const [tableData, pagination, loading, onQuery, onReload, , loadDataAll] =
    useTableData(getElecEquipmentScheduling, {
      params: getParams()
    })
  const download = async () => {
    const data = await loadDataAll()
    downloadExcelImg(data.data, columns, '运维调度列表')
  }
  const upload = (info) => {
    if (info.file.status == 'done') {
      message.info('上传提交成功')
    }
  }
  const handlerText = (a, b) => {
    return (
      <div>
        {a}
        <span style={{ color: 'red' }}>*</span>
        {b}
      </div>
    )
  }
  return (
    <Container>
      <Container.ContainerQuery title="查询条件">
        <Filter
          onQuery={onQuery}
          paramsData={paramsData}
          setParamsData={setParamsData}
          download={download}
          upload={upload}
        />
      </Container.ContainerQuery>
      <Container.ContainerContent title="查询结果">
        <Table
          bordered
          tableLayout="fixed"
          loading={loading}
          columns={columns}
          dataSource={tableData}
          size="small"
          rowKey={(row) => {
            return JSON.stringify(row)
          }}
          pagination={pagination}
          scroll={{
            y: '65vh'
          }}
        />
      </Container.ContainerContent>
    </Container>
  )
}
export default Operation
